<template>
  <div
    class="fruiter-everydayPriceMsg"
    :style="{ width: isHall ? '1500px' : '1000px' }"
    v-if="result&&result.isBroadcast&&result.isBroadcast === 1"
  >
    <img src="../assets/trumpet.png" alt="" />
    <div style="padding: 0 15px">价格播报</div>
    <!-- <div class="scroll-content">
      <dv-scroll-board :config="config" style="width: 100%; height: 140px" ref="scrollBoard" />
    </div> -->
    <div class="rant-contect">
      <vue-seamless-scroll :data="needsData" :class-option="defaultOption" style="height: 50px">
        <template v-for="(item, index) in needsData">
          <div :key="index" class="i-content">
            <div class="block-name" :title="item.blockName">{{ item.blockName }}</div>
            <div class="d-varietiesName" :title="item.varietiesName">{{ item.varietiesName }}</div>
            <div>{{ item.price }}/斤</div>
          </div>
        </template>
      </vue-seamless-scroll>
    </div>
    <div class="ge">｜</div>
    <div class="high">
      <span>最高价</span>
      <a-icon type="arrow-up" style="color: RGBA(255, 71, 71, 1); padding-right: 8px" />
      <span style="color: rgba(255, 71, 71, 1)">{{
        (result && result.highestPrice && result.highestPrice) || '-'
      }}</span>
      <span>元/斤</span>
    </div>
    <div class="ge">｜</div>
    <div class="low">
      <span>最低价</span>
      <a-icon type="arrow-down" style="color: #17f302; padding-right: 8px" />
      <span style="color: #17f302">{{ (result && result.lowestPrice && result.lowestPrice) || '-' }}</span>
      <span>元/斤</span>
    </div>
    <div class="ge">｜</div>
    <div class="avg">
      <span>平均价</span>
      <a-icon type="minus" style="color: #00ceee; padding-right: 8px" />
      <span style="color: #00ceee">{{ (result && result.averagePrice && result.averagePrice) || '-' }}</span>
      <span>元/斤</span>
    </div>
  </div>
</template>
<script>
import { getTqppOfferPrice } from '@/api/dashboards'
export default {
  props: {
    isHall: {
      type: Number,
    },
  },
  data() {
    return {
      config: {},
      needsData: [],
      result: undefined,
    }
  },

  watch: {
    isHall: {
      immediate: true,
      handler: function (val) {
        if (val) {
        }
      },
    },
  },
  computed: {
    defaultOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 50, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 3000, // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
  created() {},
  mounted() {
    this.getTqppOfferPrice()
  },
  methods: {
    async getTqppOfferPrice() {
      let res = await getTqppOfferPrice()
      if (res.success) {
        this.result = res.result
        res.result.detailsList &&
          res.result.detailsList.length &&
          res.result.detailsList.map((item) => {
            item.details &&
              item.details.length &&
              item.details.map((i) => {
                i.blockName = item.blockName
                this.needsData.push(i)
              })
          })
        // let dataList = []
        // this.needsData.forEach((item) => {
        //   item.pricedata = `${item.varietiesName}${item.price}/斤`
        //   dataList.push([item.blockName, item.pricedata])
        // })
        // this.config = {
        //   align: ['center', 'center', 'center'],
        //   waitTime: 5000,
        //   index: false,
        //   columnWidth: [140, 140],
        //   rowNum: 1,
        //   header: [],
        //   headerBGC: 'rgba(255, 255, 255, 0)',
        //   oddRowBGC: ' rgba(255, 255, 255, 0)',
        //   evenRowBGC: 'rgba(0, 255, 203, 0)',
        //   data: dataList,
        // }
      } else {
        this.$message.warning(res.message)
      }
    },
  },
}
</script>
<style lang="less" scoped>
.fruiter-everydayPriceMsg {
  width: 1000px;
  height: 50px;
  line-height: 50px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 7% 0 16px;
  .rant-contect {
    width: 30%;
    overflow: hidden;
    .i-content {
      display: flex;
      .block-name {
        width: 140px;
        padding: 0 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
      }
      .d-varietiesName {
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
      }
      .d-num {
      }
    }
  }

  img {
    width: 18px;
    height: 16px;
  }
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  .ge {
    color: rgba(255, 255, 255, 0.4);
    padding: 0 15px;
  }
}
</style>